<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.5/css/layui.css">
</head>
<body>
<div style="padding: 15px;">
    <div class="layui-btn-group demoTable">
        <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
        <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
        <button class="layui-btn" data-type="isAll">验证是否全选</button>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
    </div>
    <table id="demo" lay-filter="test"></table>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</div>
</body>
<script type="text/javascript" src="/webjars/jquery/3.1.1/jquery.js"></script>
<script type="text/javascript" src="/webjars/layui/2.5.5/layui.js"></script>
<script>
    $(function () {
        //添加
        $('#btn-add').on('click', function () {
            layer.open({
                title: '添加信息',
                type: 2,
                content: 'Insert/insert.html',
                area: ['500px', '600px']
            });
        });
    })

    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#demo'  //要和table标签ID一致
            ,url: '/SelectUserList'
            ,height: 'full'
            ,page: true
            ,curr:1
            ,limit:10
            ,loading: true
            ,cols: [[
                {type:'checkbox', fixed: 'left'},
                {field:'userId', width:80, sort: true, fixed: true,title:'ID'},
                {field:'userName', width:80,title:'用户名'},
                {field:'password', width:80, sort: true,title:'密码'},
                {field:'salt', width:80,title:'盐'},
                {field:'name', width:160,title:'姓名'},
                {field:'sex', width:80, sort: true,title:'性别'},
                {fixed: 'right', width:178, align:'center', toolbar: '#barDemo',title: '操作'}
            ]]
        });



        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){

        });
        //监听工具条
        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;    //获取当前行的数据
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.userId + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除'+data.userId+'号用户吗？', function(index){
                    $.ajax({
                        type:"post",
                        url:"/Delete",
                        data:{
                            userId:data.userId
                        },
                        async:true,
                        dataType:"json",
                        success:function (data) {
                            if (data==true){
                                obj.del();
                                layer.msg("删除成功")
                                window.parent.location.reload();
                            }
                        }, error: function () {
                            layer.msg("删除失败")
                        }
                    },JSON)
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.open({
                    title: '修改信息',
                    type: 2,
                    content: '/Update/update.html',
                    area: ['500px', '600px'],
                    success: function (layero,index) {
                        var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                        body.find("#userId").val(data.userId)
                        body.find("#userName").val(data.userName)
                        body.find("#password").val(data.password)
                        body.find("#name").val(data.name)
                        body.find("#old").val(data.old)
                        body.find(".sex").val(data.sex)
                        result = JSON.stringify(data);
                    }
                });
                /*layer.alert('编辑行：<br>'+ JSON.stringify(data))*/
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</html>